<template>
	<view>
		<z-paging :show-refresher-when-reload="false"  show-refresher-update-time  ref="paging" v-model="dataList" @query="queryList">
			<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
			<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
			<view slot="top" class="">
				
				<view class="bar_css">
					<u-navbar  back-text=" " :title-color="style.color5" :background="{background:style.color2}" :title-size="30" :title-width="400" title="我的收藏">
						
					</u-navbar>
					<u-tabs  :list="barList" font-size="28rpx" :bar-style="barStyle" :active-item-style="item_style" :is-scroll="false" :current="current" @change="barChange"></u-tabs>
				</view>
			</view>
			<view class="list_box">
				<view v-for="(item,index) in dataList" :key="index" class="good_list_item">
					<!-- <view class="good_list_item_time">
						{{item.add_time}}
					</view> -->
					<view class="good_list_item_good">
						<u-image @click="navTo(`/pages/shop_info/shop_info?id=${item.gid}`)" border-radius="10" :src="item.goods_data.pic" width="194rpx" height="194rpx" mode="aspectFit"></u-image>
						<view class="good_list_item_good_right">
							<view class="good_title uni-ellipsis-2">
								{{item.goods_name}}
							</view>
							<view class="good_price_1">
								<view class="good_price_box">
									<view class="good_price_box_left">
										JPY
									</view>
									{{item.goods_data.price}}
								</view>
								<!-- <span>约</span> -->
							</view>
							<view class="good_info_price">
								<!-- <span class="price">
									Ұ{{item.goods_data.price}}
								</span> -->
								<view class="">
									
								</view>
								<span class="btn2-box" @click="UserCollection_del(item.gid)">
									取消收藏
								</span>
							</view>
						</view>
					</view>
				</view>
			</view>
		    
		</z-paging>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				barStyle:{
					background:'#000',
					height:'4rpx',
					padding:0
				},
				item_style:{
					color:'#333',
					fontSize:'28rpx'
				},
				dataList:[],
				current:0,
				barList:[
					{name:'全部'},
					{name:'本周'},
					{name:'本月'},
					{name:'本年'},
				],
				style:{}
			}
		},
		onShow() {
			var style =  uni.getStorageSync('style')
			style = JSON.parse(style)
			this.style = style
		},
		methods: {
			barChange(e){
				this.current = e
				this.$refs.paging.reload()	
				
			},
			// 取消收藏
			UserCollection_del(id){
				var data = {
					id:id
				}
				uni.showModal({
					title: '取消收藏',
					content: '取消收藏后将在收藏列表中去除该商品',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					success: (res) => {
					if(res.confirm) {  
						this.$wqzApi.UserCollection_del(data).then(res=>{
							uni.showToast({
								title:'已取消收藏',
								icon:'none'
							})
							this.$refs.paging.reload()	
						}).catch(err=>{
							this.$refs.paging.complete(false);
						})
					} else {  
						uni.showToast({
							title:'取消操作',
							icon:'none'
						})
						}  
					} 
				})
				
			},
			navTo(url){
				uni.navigateTo({
					url:url
				})
			},
			queryList(pageNo, pageSize) {
				var data = {
					page:pageNo,
					limit:pageSize,
					type:this.current
				}
				this.$wqzApi.UserCollection_list(data).then(res=>{
					this.$refs.paging.complete(res.data);
				}).catch(err=>{
					this.$refs.paging.complete(false);
				})
			},
		}
	}
</script>

<style lang="scss">
  @import url(./follow.css);
</style>
